<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>百商汇</title>
	<meta name="viewport" content="initial-scale = 1.0,maximum-scale = 1.0,minimum-scale = 1.0,user-scalable = no,width = device-width">
	<meta name="format-detection" content="telephone=no" />
	<link rel="stylesheet" type="text/css" href="../csses/addCard.css">
</head>
<body>
	<div class="addCard_title">
		添加银行卡或账户
		<img src="../image/back.png" onclick="goBack()" class="back">
	</div>
	<div class="addCard_box">
		<div class="tab">
			<span class="chooseW">请 &nbsp;选 &nbsp;择</span>
			<div id="personal">
				<span class="outside">
					<span class="inside" style="display: block;"></span>
				</span>
				<a>个人</a>
			</div>
			<div id="company">
				<span class="outside">
					<span class="inside"></span>
				</span>
				<a>企业账户</a>
			</div>
		</div>
		<ul class="tabContent personal" style="display: block;">
			<li>
				<span class="chooseW">开户银行</span>
				<input type="text" placeholder="请选择开户银行" readonly="true" class="chooseBank"></input>
			</li>
			<li>
				<span class="chooseW">支行(可选)</span>
				<input type="text" placeholder="请输入支行信息" class="bankZone1 input"></input>
			</li>
			<li>
				<span class="chooseW">银行卡号</span>
				<input type="text" placeholder="请输入银行卡号" class="bankCard1 input"></input>
			</li>
			<li>
				<span class="chooseW">开户姓名</span>
				<input type="text" placeholder="请输入开户姓名" class="identifyName1 input"></input>
			</li>
		</ul>
		<ul class="tabContent company">
			<li>
				<span class="chooseW">开户银行</span>
				<input type="text" placeholder="请选择开户银行" readonly="true" class="chooseBank"></input>
			</li>
			<li>
				<span class="chooseW">支 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 行</span>
				<input type="text" placeholder="请输入支行信息" class="bankZone2 input"></input>
			</li>
			<li>
				<span class="chooseW">银行账号</span>
				<input type="text" placeholder="请输入银行账号" class="bankCard2 input"></input>
			</li>
			<li>
				<span class="chooseW">企业名称</span>
				<input type="text" placeholder="请输入企业账号" class="identifyName2 input"></input>
			</li>
		</ul>
		<button class="submitBtn">保存</button>

		<div class="bankHiddenBox">
			<ul class="outsideBox">
				<li class="chooseBank">请选择银行</li>
				<div id="wrapper">
					<ul>
					</ul>
				</div>
			</ul>
		</div>

		<div class="remindBox"></div>
	</div>

	<script type="text/javascript" src="../lib/flexible.js"></script>
	<script type="text/javascript" src="../lib/jquery-1.10.1.min.js"></script>
	<script type="text/javascript" src="../lib/Iscroll-I.js"></script>
	<script type="text/javascript">
		var myScroll,vvv = 'personal';

		function Tab (classname1,classname2,classname3) {
			this.aIn = document.getElementsByClassName(classname1);
			this.aOut = document.getElementsByClassName(classname2);
			this.aUl = document.getElementsByClassName(classname3);
		}

		$('.input').focus(function(){
			this.select();
		});

		Tab.prototype.init = function () {
			that = this;
			for(var i = 0; i < this.aOut.length; i++){
				this.aOut[i].index = i;
				this.aOut[i].onclick = function () {
					that.change(this);
					var m = event.target.parentNode;
					vvv = m.getAttribute('id');
				}
			}
		};

		Tab.prototype.change = function (obj) {
			for(var i = 0; i < this.aOut.length; i++){
				this.aIn[i].style.display = 'none';
				this.aUl[i].style.display = 'none';
			}
			this.aIn[obj.index].style.display = 'block';
			this.aUl[obj.index].style.display = 'block';
		};

		var tab = new Tab('inside','outside','tabContent');
		tab.init();

		function goBack(){
			window.history.back();
		}
		
		$('.chooseBank').click(function(){
        	$('.bankHiddenBox').css('display','block');
        	myScroll = new IScroll('#wrapper', { probeType: 3, mouseWheel: true ,bounce: false,click:true});
        });

		$.ajax({
			type : 'post',
			url : '/api/v1/bank/allCardList',
			data : {
				paramStr : "{'userName':'" + sessionStorage.userName + "','token':'" + sessionStorage.token + "'}"
			},
			dataType : 'json',
			timeout : 10000,
			success : function (data) {
				if(data.code == 200){
					var obj = JSON.parse(data.data);
					var infoList = obj.allCardList;
					$('#wrapper ul').html('');
					var $ul = $('#wrapper ul');
					for (var i in infoList) {
	                	$('<li bankid='+infoList[i]["id"]+'>'+infoList[i]["name"]+'</li>').appendTo($ul);
	                }
	                $('#wrapper ul li').click(function(){
	                	sessionStorage.bankid = $(this).attr('bankid');
	                	$('.chooseBank').val($(this).text());
	                	$('.bankHiddenBox').css('display','none');
	                });
				}
			},
			error : function (xhr,type,errorThrown) {
				// alert('未知错误');
			}
		});
		var $remindBox = $('.remindBox');
		function remind(a){
			$remindBox.css('display','block').text(a);
			setTimeout(function(){
				$remindBox.css('display','none');
			},1500);
		}

		$('.submitBtn').bind('click',function(){
			if(vvv == 'personal'){
				var $identifyName = $('.identifyName1').val();
				var $bankZone = $('.bankZone1').val();
				var $bankCard = $('.bankCard1').val();
				console.log($bankZone);
				console.log($identifyName);
				console.log($bankCard);
				get($bankZone,$bankCard,$identifyName);
			}else if(vvv == 'company'){
				var $identifyName = $('.identifyName2').val();
				var $bankZone = $('.bankZone2').val();
				var $bankCard = $('.bankCard2').val();
				console.log($bankZone);
				console.log($identifyName);
				console.log($bankCard);
				if(!$bankZone){
					remind('请填写支行信息');
				}else{
					get($bankZone,$bankCard,$identifyName);
				}
			}	
		});

		function get(bankZone,bankCard,identifyName){
			$.ajax({
				type : 'post',
				url : '/api/v1/bank/add',
				data : {
					paramStr : "{'userName':'" + sessionStorage.userName + "','token':'" + sessionStorage.token + "','bankId':'" + sessionStorage.bankid + "','bankZone':'" + bankZone + "','bankCard':'" + bankCard + "','identifyName':'" + identifyName + "','isMerchant':'" + sessionStorage.isMerchant + "'}"
				},
				dataType : 'json',
				timeout : 10000,
				success : function (data) {
					console.log(data);
					if(data.code == 200){
						$('.submitBtn').attr('disabled',true).css('background','#ccc');
						setTimeout(function(){
							window.location.href = 'bankCard.html';
						},1500);
					}
					remind(data.message);
				},
				error : function (xhr,type,errorThrown) {
					alert('未知错误');
				}
			});
		}
	</script>
</body>
</html>